<!DOCTYPE html>
<html lang="en" style="width: 100%;height: 100%;">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
	<link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet">

	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
	<script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js"></script>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
	<script src="/sa-resources/admin-util.js"></script>
	<script src="/res/sa.js"></script>
	<!--    <script src="https://api.map.baidu.com/api?v=2.0&ak=pB1cQmp3mKHrI8PMYQGoogGvGnpahqNn" type="text/javascript"></script>-->
	<!--    <script type="text/javascript" src="//api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>-->
	<script src="//webapi.amap.com/maps?v=1.4.15&key=187c426207df3f73a755da81f4a1ec58"></script>
	<script src="//webapi.amap.com/loca?v=1.3.0&key=187c426207df3f73a755da81f4a1ec58&dev=1"></script>
	<script src="house.js" type="text/javascript"></script>
	<style>
		#heightBtn {
			color: #ddd;
			z-index: 2;
			position: fixed;
			right: 20px;
			top: 20px;
			background: #333;
			padding: 5px 10px;
			border-radius: 5px;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
		}

		#heightBtn:hover {
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
			cursor: pointer;
			user-select: none;
			color: #fff
		}

		.legend {
			position: fixed;
			bottom: 20px;
			right: 20px;
			background: transparent;
			border-radius: 5px;
			/*box-shadow: 0 0 5px rgba(0, 0, 0, 0.9);*/
		}

		.citydrop {
			position: fixed;
			top: 5rem;
			right: 20px;
			border-radius: 4px;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
		}

		.legend ul {
			padding: 5px 20px;
			margin: 0;
			list-style: none;
		}

		.color-item {
			width: 67px;
			height: 20px;
			display: inline-block;
		}

		.label-item {
			color: #333;
			display: inline-block;
			width: 67px;
			text-align: center;
			margin-left: -4px;
			font-size: 14px;
		}

		body {
			margin: 0;
		}

		.info {
			padding: .75rem 1.25rem;
			margin-bottom: 1rem;
			border-radius: .25rem;
			position: fixed;
			top: 1rem;
			background: rgba(0, 0, 0, 0.5);
			width: auto;
			min-width: 22rem;
			border-width: 0;
			right: 8rem;
			color: white;
			box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
		}

		/* 信息浮框 */
		.info span {
			min-width: 150px;
			max-width: 300px;
			font-size: 1.2em;
		}
	</style>
</head>
<body style="width: 100%;height: 100%;">
<div id="container" style="height: 100%"></div>
<div class="info" style="width: 300px;">
	<p>当前价格指数：<span id="val">--</span></p>
	<p>中心点坐标：
		<span id="lng-lat">--</span>
	</p>
</div>
<a id="heightBtn">3D</a>
<!--<div class="legend">-->
<!--	<ul class="colors" id="legend-color"></ul>-->
<!--	<ul class="labels" id="legend-label" style="padding: 0"></ul>-->
<!--</div>-->
<div class="citydrop" id="dropdown">
	<el-dropdown @command="handleCommand" size="mini" split-button type="primary">
		{{currentcity}}
		<el-dropdown-menu slot="dropdown">
			<el-dropdown-item v-bind:command="item.city_name" v-bind:key="item.city_name" v-for="item in cityList">
				{{item.city_name}}
			</el-dropdown-item>
		</el-dropdown-menu>
	</el-dropdown>
</div>
</body>
</html>